<template>
  <view class="content">
    <view class="chatBox">
      <view class="leftItem" v-for="item in infoList" :key="item.timestamp" v-if="item.senderId!=myInfo.id">
        <view class="leftBox">
          <image
              :src="item.avatarUrl"
              mode=""></image>
        </view>
        <view class="rightBox">
          <view class="name">
            {{item.name}}
          </view>
          <view class="text">
            {{item.content}}
          </view>
        </view>
      </view>
      <view class="rightItem" v-for="item in infoList" :key="item.timestamp" v-if="item.senderId==myInfo.id">
        <view class="leftBox">
          <view class="text">
            {{item.content}}
          </view>
        </view>
        <view class="rightBox">
          <image
              src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/9947/2023-01-12/528ea0e2-ae00-4a71-a0ef-41ae299fa900.png"
              mode=""></image>
        </view>
      </view>
    </view>
    <view class="send">
      <image src="../../static/activity/communication/logo1.svg" alt="" @click="onClickAudio"></image>
      <input v-if="!isAudio" v-model="input" type="text" placeholder="Text Input">
      <button class="audioBtn" v-else>按住输入语音</button>
      <image v-show="!input" src="../../static/activity/communication/logo2.svg" alt=""></image>
      <text v-show="input" @click="onClickSend">发送</text>
    </view>
  </view>

</template>

<script>
import WebsocketObj from "../../request/websocketObj";
import { getUserInfo } from "../../request/api";

export default {
  data () {
    return {
      input: '',
      infoList: [],
      myInfo: '',
      socketTask: null,
      is_open_socket: false,
      isAudio:false,
      audioManager:{}
    }
  },
  onLoad () {
  },
  beforeDestroy () {
  },
  methods: {
    initWebSocket(){
      this.userInfo=uni.getStorageSync('userInfo')
      this.connectSocketInit();
      this.socketTask.socketTask.onMessage(res=>{
        let msg={
          content:'',
          contentType: '',
          timestamp: '',
          senderId:''
        }
        let data=res.data
        msg.content=data.match(/content=(\S*),/)[1]
        msg.contentType=data.match(/contentType=(\S*),/)[1]
        msg.timestamp=data.match(/timestamp=(\S*),/)[1]
        msg.senderId=data.match(/senderId=(\S*)\)/)[1]
        getUserInfo({
          id:msg.senderId
        }).then(res=>{
          msg.avatarUrl=res.data.data.pictureUrl
          msg.name=res.data.data.nickname
          this.infoList.push(msg)
        })
      })
    },
    initAudio(){
      this.audioManager=uni.getRecorderManager()
    },
    connectSocketInit () {
      this.socketTask = new WebsocketObj(`ws://124.220.210.36:8520/api/im/${this.userInfo.id}`, 5000)
    },
    onClickSend () {
      let sendInfo = {
        content: this.input,
        contentType: 0,
        timestamp:Date.now()
      }
      this.socketTask.send(sendInfo)
    },
    onClickAudio(){
      this.isAudio=!this.isAudio
    },
    startRecord(){

    },
    endRecord(){

    },
  }
}
</script>

<style scoped lang="less">
.content {
  width: 100vw;
  height: 89vh;

  .chatBox {
    width: 100vw;
    padding-bottom: 6vh;
    display: flex;
    flex-wrap: wrap;

    .leftItem {
      width: 100vw;
      min-height: 10vh;
      display: flex;
      flex-wrap: wrap;
      padding-top: 20px;

      .leftBox {
        padding-left: 10px;
        display: flex;
        justify-content: center;
        width: 50px;
        height: 50px;

        image {
          border-radius: 6px;
          width: 50px;
          height: 50px;
        }
      }

      .rightBox {
        margin-left: 15px;

        .name {
          transform: translate(0, -3px);
          font-size: 14px;
        }

        .text {
          font-size: 16px;
          font-weight: 600;
          padding-left: 10px;
          width: 300px;
          line-height: 2;
          background: lightblue;
          color: #fff;
          border-radius: 4px;
          max-width: 50vw;
        }
      }

      .text:before {
        position: absolute;
        left: 0;
        transform: translate(66px, 6px);
        content: '';
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid lightblue;
      }
    }

    .rightItem {
      width: 100vw;
      min-height: 10vh;
      display: flex;
      flex-wrap: wrap;
      padding-top: 20px;
      justify-content: right;
      margin-right: auto;

      .rightBox {
        padding-right: 10px;
        width: 50px;
        height: 50px;

        image {
          border-radius: 6px;
          width: 50px;
          height: 50px;
        }
      }

      .leftBox {
        margin-right: 10px;
        transform: translate(0, 10px);

        .text {
          font-size: 16px;
          font-weight: 600;
          padding-left: 10px;
          width: 300px;
          line-height: 2;
          background: lightblue;
          color: #fff;
          border-radius: 4px;
          max-width: 50vw;
          padding-right: 10px;
        }

        .text:before {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          transform: translate(10px, 5px);
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-left: 10px solid lightblue;
        }
      }

    }
  }
}

.send {
  width: 100vw;
  display: flex;
  position: fixed;
  bottom: 0;
  justify-content: space-between;
  align-items: center;
  border: rgba(205, 205, 205, 1) solid 1px;
  height: 6vh;
  background-color: white;

  image {
    margin-left: 10px;
    margin-right: 10px;
    width: 30px;
    height: 30px;
  }

  input {
    width: 72vw;
    height: 35px;
    border-radius: 8px;
    border: rgba(205, 205, 205, 1) solid 1px;
    padding-left: 10px;
    font-weight: 300;
  }

  text {
    margin-right: 10px;
    height: 6vh;
    width: 40px;
    line-height: 6vh;
    text-align: center;
  }
  .audioBtn{
    width: 75vw;
  }
}


</style>
